<%= render "shared/error_messages", resource: developer %>

<div class="flex flex-col space-y-6">
  <% unless turbo_native_app? %>
    <h1 class="text-3xl font-bold leading-tight text-gray-900 mx-4 lg:mx-0 mt-8 lg:mt-16">
      <%= t(".title") %>
    </h1>
  <% end %>

  <%= form_with model: developer do |form| %>
    <section class="bg-white shadow px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h2 class="text-lg font-medium leading-6 text-gray-900"><%= t(".profile.title") %></h2>
          <p class="mt-2 text-sm text-gray-500"><%= t(".profile.help_text") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2">
          <div class="space-y-6">
            <div>
              <%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1">
                <%= form.text_field :name, autocomplete: "name", class: field_classes(form, :name) %>
              </div>
              <p class="mt-2 text-sm text-gray-500"><%= t(".profile.name_help_text_html") %></p>
            </div>

            <div>
              <%= form.label :hero, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1">
                <%= form.text_field :hero, class: field_classes(form, :hero) %>
              </div>
              <p class="mt-2 text-sm text-gray-500"><%= t(".profile.hero_help_text") %></p>
            </div>

            <%= form.fields_for :location, include_id: false do |location| %>
              <div>
                <div class="grid grid-cols-1 sm:grid-cols-5 sm:col-span-3 gap-6">
                  <div class="sm:col-span-2">
                    <div class="flex items-center">
                      <%= location.label :city, class: "block text-sm font-medium text-gray-700" %>
                      <%= render Developers::NewFieldComponent.new(form.object, :location, size: :small) %>
                    </div>
                    <div class="mt-1">
                      <%= location.text_field :city, class: field_classes(location, :city) %>
                    </div>
                  </div>
                  <div class="sm:col-span-1">
                    <%= location.label :state, class: "block text-sm font-medium text-gray-700" %>
                    <div class="mt-1">
                      <%= location.text_field :state, class: field_classes(location, :state) %>
                    </div>
                  </div>
                  <div class="sm:col-span-2">
                    <%= location.label :country, class: "block text-sm font-medium text-gray-700" %>
                    <div class="mt-1">
                      <%= location.text_field :country, class: field_classes(location, :country) %>
                    </div>
                  </div>
                </div>
                <p class="mt-2 text-sm text-gray-500"><%= t(".profile.location_help_text") %></p>
              </div>
            <% end %>

            <div data-controller="file-upload" data-file-upload-visibility-class="hidden" data-file-upload-loading-class="opacity-50">
              <span class="block text-sm font-medium text-gray-700"><%= t(".profile.avatar") %></span>
              <div class="mt-1 flex items-center">
                <div class="relative">
                  <%= render AvatarComponent.new(avatarable: developer, variant: :medium, data: {"file-upload-target": "image"}) %>
                  <div data-file-upload-target="activity" class="hidden absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <%= inline_svg_tag "icons/outline/refresh.svg", class: "w-8 h-8 text-gray-900 animate-reverse-spin", title: t(".loading") %>
                  </div>
                </div>
                <%= form.hidden_field :avatar, value: form.object.avatar.signed_id, id: "developer_avatar_hidden" if form.object.avatar.attached? %>
                <%= form.file_field :avatar, direct_upload: true, accept: "image/png, image/jpg, image/jpeg", data: {action: "file-upload#select direct-upload:initialize->file-upload#start direct-upload:error->file-upload#error"}, class: "hidden" %>
                <%= form.label :avatar, t(".profile.change"), class: "cursor-pointer ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
              </div>
              <div data-file-upload-target="error" class="hidden bg-red-50 border-l-4 border-red-400 p-4 mt-4">
                <div class="ml-3">
                  <p class="text-sm text-red-700"><%= t(".profile.avatar_error_text") %></p>
                </div>
              </div>
            </div>

            <div data-controller="file-upload" data-file-upload-visibility-class="hidden" data-file-upload-loading-class="opacity-50">
              <span class="block text-sm font-medium text-gray-700"><%= t(".profile.cover_image") %></span>
              <div class="relative">
                <%= form.hidden_field :cover_image, value: form.object.cover_image.signed_id, id: "developer_cover_image_hidden" if form.object.cover_image.attached? %>
                <%= form.file_field :cover_image, direct_upload: true, accept: "image/png, image/jpg, image/jpeg, image/gif", data: {action: "input->file-upload#select direct-upload:initialize->file-upload#start direct-upload:error->file-upload#error"}, class: "hidden" %>
                <%= form.label :cover_image, t(".profile.change"), class: "cursor-pointer absolute right-0 bottom-0 z-10 m-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>

                <%= render Developers::CoverImageComponent.new(developer: developer, data: {"file-upload-target": "image"}, classes: "rounded-md mb-4") %>
                <div data-file-upload-target="activity" class="hidden absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <%= inline_svg_tag "icons/outline/refresh.svg", class: "w-8 h-8 text-gray-900 animate-reverse-spin", title: t(".loading") %>
                </div>
              </div>
              <div class="flex mt-2 text-sm text-gray-600">
                <p class=""><%= t(".profile.upload_file") %></p>
              </div>
              <p class="text-xs text-gray-500"><%= t(".profile.upload_help_text") %></p>
              <div data-file-upload-target="error" class="hidden bg-red-50 border-l-4 border-red-400 p-4 mt-4">
                <div class="ml-3">
                  <p class="text-sm text-red-700"><%= t(".profile.upload_error_text") %></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h2><%= form.label :bio, class: "text-lg font-medium leading-6 text-gray-900" %></h2>
          <p class="mt-2 text-sm text-gray-500"><%= t(".bio.description") %></p>

          <h4 class="font-medium uppercase tracking-wide text-gray-500 text-sm mt-4"><%= t(".bio.examples.title") %></h4>
          <ul class="text-sm text-gray-500 list-disc list-inside">
            <li class="mt-1"><%= t(".bio.examples.origin") %></li>
            <li class="mt-1"><%= t(".bio.examples.accomplishment") %></li>
            <li class="mt-1"><%= t(".bio.examples.learned") %></li>
            <li class="mt-1"><%= t(".bio.examples.passion") %></li>
            <li class="mt-1"><%= t(".bio.examples.help") %></li>
            <li class="mt-1"><%= t(".bio.examples.unique") %></li>
          </ul>

          <p class="mt-4 text-sm text-gray-500"><%= t(".bio.markdown") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2">
          <div class="space-y-6">
            <div>
              <%= form.text_area :bio, rows: 20, class: field_classes(form, :bio) %>
              <p class="mt-2 text-sm text-gray-500"><%= t(".bio.help_text") %></p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <% if Feature.enabled?(:developer_specialties) %>
      <section id="specialties" class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
        <div class="md:grid md:grid-cols-3 md:gap-6">
          <div>
            <h2 class="text-lg font-medium leading-6 text-gray-900">Specialties</h2>
            <%= render Developers::NewFieldComponent.new(form.object, :specialties) %>
            <p class="mt-2 text-sm text-gray-500"><%= t(".specialties.description") %></p>
            <p class="mt-2 text-sm text-gray-500"><%= t(".specialties.new.before") %> <%= link_to t(".specialties.new.cta"), "mailto:joe@railsdevs.com?subject=#{t(".specialties.new.subject")}", class: "text-gray-700 font-medium underline hover:text-gray-900" %>.</p>

            <h4 class="font-medium uppercase tracking-wide text-gray-500 text-sm mt-4"><%= t(".specialties.note.title") %></h4>
            <p class="mt-1 text-sm text-gray-500"><%= t(".specialties.note.description") %></p>
          </div>

          <div class="mt-5 md:mt-0 md:col-span-2">
            <div class="space-y-6">
              <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                <%= form.collection_check_boxes(:specialty_ids, specialties, :id, :name) do |specialty| %>
                  <div class="flex items-center">
                    <%= specialty.check_box class: "h-4 w-4 border-gray-300 rounded text-gray-600 text-gray-600 focus:ring-gray-500" %>
                    <%= specialty.label class: "text-gray-500 text-sm ml-3" %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </section>
    <% end %>

    <section class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h2 class="text-lg font-medium leading-6 text-gray-900"><%= t(".work_preferences.title") %></h2>
          <p class="mt-2 text-sm text-gray-500"><%= t(".work_preferences.help_text") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2">
          <div class="space-y-6">
            <fieldset>
              <legend class="text-base font-medium text-gray-900">
                <div class="flex">
                  <%= t(".search_status.title") %>
                  <%= render Developers::NewFieldComponent.new(form.object, :search_status) %>
                </div>
              </legend>
              <div class="mt-4 space-y-4">
                <div class="flex items-start">
                  <div class="h-5 flex items-center">
                    <%= form.radio_button :search_status, :actively_looking, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300" %>
                  </div>
                  <div class="ml-3 text-sm">
                    <%= form.label :search_status, value: :actively_looking, class: "font-medium text-gray-700" %>
                    <p class="text-gray-500"><%= t(".search_status.actively_looking_help_text") %></p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <%= form.radio_button :search_status, :open, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300" %>
                  </div>
                  <div class="ml-3 text-sm">
                    <%= form.label :search_status, value: :open, class: "font-medium text-gray-700" %>
                    <p class="text-gray-500"><%= t(".search_status.open_help_text") %></p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <%= form.radio_button :search_status, :not_interested, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300" %>
                  </div>
                  <div class="ml-3 text-sm">
                    <%= form.label :search_status, value: :not_interested, class: "font-medium text-gray-700" %>
                    <p class="text-gray-500"><%= t(".search_status.not_interested_help_text") %></p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <%= form.radio_button :search_status, :invisible, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300" %>
                  </div>
                  <div class="ml-3 text-sm">
                    <%= form.label :search_status, value: :invisible, class: "font-medium text-gray-700" %>
                    <p class="text-gray-500"><%= t(".search_status.invisible_help_text") %></p>
                  </div>
                </div>
              </div>
            </fieldset>

            <%= form.fields_for :role_type, include_id: false do |role_type| %>
              <fieldset>
                <div>
                  <legend class="text-base font-medium text-gray-900 w-full">
                    <div class="flex">
                      <%= t(".role_type.title") %>
                      <%= render Developers::NewFieldComponent.new(form.object, :role_type) %>
                    </div>
                  </legend>
                  <p class="text-sm text-gray-500"><%= t(".role_type.help_text") %></p>
                </div>
                <div class="mt-4 space-y-4">
                  <div class="flex items-center">
                    <%= role_type.check_box :part_time_contract, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_type.label :part_time_contract, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                  <div class="flex items-center">
                    <%= role_type.check_box :full_time_contract, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_type.label :full_time_contract, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                  <div class="flex items-center">
                    <%= role_type.check_box :full_time_employment, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_type.label :full_time_employment, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                </div>
              </fieldset>
            <% end %>

            <%= form.fields_for :role_level, include_id: false do |role_level| %>
              <fieldset>
                <div>
                  <legend class="text-base font-medium text-gray-900 w-full">
                    <div class="flex">
                      <%= t(".role_level.title") %>
                      <%= render Developers::NewFieldComponent.new(form.object, :role_level) %>
                    </div>
                  </legend>
                  <p class="text-sm text-gray-500"><%= t(".role_level.help_text") %></p>
                </div>
                <div class="mt-4 space-y-4">
                  <div class="flex items-center">
                    <%= role_level.check_box :junior, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_level.label :junior, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                  <div class="flex items-center">
                    <%= role_level.check_box :mid, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_level.label :mid, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                  <div class="flex items-center">
                    <%= role_level.check_box :senior, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_level.label :senior, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                  <div class="flex items-center">
                    <%= role_level.check_box :principal, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_level.label :principal, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                  <div class="flex items-center">
                    <%= role_level.check_box :c_level, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                    <%= role_level.label :c_level, class: "ml-3 block text-sm font-medium text-gray-700" %>
                  </div>
                </div>
              </fieldset>
            <% end %>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h2 class="text-lg font-medium leading-6 text-gray-900"><%= t(".online_presence.title") %></h2>
          <p class="mt-2 text-sm text-gray-500"><%= t(".online_presence.help_text") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2">
          <div class="space-y-6">
            <div>
              <%= form.label :website, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  https://
                </span>
                <%= form.text_field :website, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div class="sm:col-start-1 sm:col-end-4">
              <%= form.label :github, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  github.com/
                </span>
                <%= form.text_field :github, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div class="sm:col-start-1 sm:col-end-4">
              <%= form.label :gitlab, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  gitlab.com/
                </span>
                <%= form.text_field :gitlab, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div class="sm:col-start-1 sm:col-end-4">
              <%= form.label :linkedin, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  linkedin.com/in/
                </span>
                <%= form.text_field :linkedin, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div class="sm:col-start-1 sm:col-end-4">
              <%= form.label :stack_overflow, "Stack Overflow", class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  stackoverflow/users/
                </span>
                <%= form.text_field :stack_overflow, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div class="sm:col-start-1 sm:col-end-4">
              <%= form.label :twitter, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  twitter.com/
                </span>
                <%= form.text_field :twitter, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div>
              <%= form.label :mastodon, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  https://
                </span>
                <%= form.text_field :mastodon, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h2 id="scheduling" class="text-lg font-medium leading-6 text-gray-900"><%= t(".scheduling.title") %></h2>
          <p class="mt-2 text-sm text-gray-500"><%= t(".scheduling.help_text") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2 space-y-4">
          <div>
            <div class="flex items-center">
              <%= form.label :scheduling_link, class: "block text-sm font-medium text-gray-700" %>
              <%= render Developers::NewFieldComponent.new(form.object, :scheduling_link, size: :small) %>
            </div>
            <div class="mt-1 flex rounded-md shadow-sm">
              <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                https://
              </span>
              <%= form.text_field :scheduling_link, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <fieldset class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <legend id="notifications" class="text-lg font-medium leading-6 text-gray-900"><%= t(".notifications.title") %></legend>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2 space-y-4">
          <fieldset>
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="h-5 flex items-center">
                  <%= form.check_box :profile_reminder_notifications, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                </div>
                <div class="ml-3 text-sm">
                  <%= form.label :profile_reminder_notifications, t(".notifications.profile_reminder_notifications"), class: "font-medium text-gray-700" %>
                  <p class="text-gray-500"><%= t(".notifications.profile_reminder_notifications_help") %></p>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset id="feature_notifications">
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="h-5 flex items-center">
                  <%= form.check_box :product_announcement_notifications, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                </div>
                <div class="ml-3 text-sm">
                  <%= form.label :product_announcement_notifications, t(".notifications.product_announcement_notifications"), class: "font-medium text-gray-700" %>
                  <p class="text-gray-500"><%= t(".notifications.product_announcement_notifications_help") %></p>
                </div>
              </div>
            </div>
          </fieldset>
        </div>
      </fieldset>
    </section>

    <div class="flex justify-end mt-8 mb-16 mr-4 sm:mr-6 lg:mr-0">
      <%= render SubmitButtonComponent.new(disable_with: developer.persisted? ? t(".updating") : t(".creating"), button_classes: "ml-3") %>
    </div>
  <% end %>
</div>
